<template>
  <b-page class="gzh-qywx ">
    <b-loading v-if="!loading"/>
    <div class="gzh-qywx-desc">
      <div class="desc-title">授权公众号</div>
      <div class="desc-content" v-for="(item,index) in descList" :key="index" v-html="item"></div>
    </div>
    <div class="mp-list">
      <div v-for="item in mpList" :key="item.id" class="mp-item">
        <div class="item-top">
          <img class="item-image" :src="item.avatar"/>
          <div class="item-name">
            {{ item.mpName }}
          </div>
          <div class="item-tags">
            <div class="item-tag-1">
              {{ getServiceType(item.serviceTypeInfo) }}
            </div>
            <div class="item-tag-2">
              {{ getVerifyType(item.verifyTypeInfo).substring(0,6) }}
            </div>
          </div>
        </div>
        <div class="item-permission-list">
          <div
            v-for="(permission,index) in item.permissions"
            :key="'permission'+index"
            class="item-permission">
            <div class="permission-icon">
              <i class="el-icon-star-on"/>
            </div>
            <div class="permission-name">{{ permission.name }}</div>
            <div class="permission-duration">{{ permission.duration }}</div>
            <div class="permission-operator">续费</div>
          </div>
        </div>
      </div>
      <div class="mp-item add pointer" @click="addMp">
        <span class="material-icons add-icon">add_circle_outline</span>
        <span>添加公众号</span>
      </div>
    </div>
  </b-page>
</template>

<script>
  import { getMpBindUrl, listMyMps } from '../../../api/common'

  export default {
    name: 'GzhQywx',
    data () {
      return {
        serviceTypeList: ['订阅号', '企业号', '服务号'],
        verifyTypeList: ['未认证', '微信认证', '新浪微博认证', '腾讯微博认证', '已资质认证通过但还未通过名称认证', '已资质认证通过、还未通过名称认证，但通过了新浪微博认证', '已资质认证通过、还未通过名称认证，但通过了腾讯微博认证'],
        descList: [
          ' 1. 请务必使用<span style="color: #378BFB">已认证服务号</span>授权使用该系统',
          ' 2. 该系统适用于同一公司主体旗下2个公众号同时使用',
          ' 3. 为保证所有功能正常，授权时请保持默认选择，把权限统一授权给必火平台'
        ],
        mpList: [
          {
            id: 1,
            avatar: 'http://wx.qlogo.cn/mmopen/wbKdib81ny6ibb8etNImatQFUPP6MS3EMAzteDwUWPexDolfZrw9HicaiaBJYHrUpUQABeTfOiaTSdViaJKlDib1SWWBjibO4rT6IVJa/0',
            mpName: '公众号名称',
            verifyTypeInfo: '2',
            serviceTypeInfo: '1',
            permissions: []
          }],
        bindUrl: null,
        loading: true
      }
    },
    computed: {
      id () {
        return this.$store.state.user.info.id
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      async getData () {
        this.loading = false
        this.mpList = await listMyMps()
        this.bindUrl = await getMpBindUrl({ redirectUrl: location.href, id: this.id })
        this.loading = true
      },
      getServiceType (type) {
        if (!type) {
          return ''
        }
        const index = Number.parseInt(type)
        return this.serviceTypeList[index]
      },
      getVerifyType (type) {
        if (!type) {
          return ''
        }
        const index = Number.parseInt(type)
        return this.verifyTypeList[index + 1]
      },
      addMp () {
        location.href = this.bindUrl
        // 授权跳转地址，提供当前返回地址
        // const token = storage.get(ACCESS_TOKEN)
        // const qwUserId = this.$store.state.user.info.qwUserId
        // 'https://lb.bihuo8.com/api/rwb/auth?access_token=' + token + '&redirectUri=' +
        // encodeURIComponent(location.href) + '&qwUserId=' + qwUserId
      }
    }
  }
</script>

<style scoped lang="less">
  .gzh-qywx {
    .gzh-qywx-desc {
      margin-bottom: 10px;
      padding: 18px 13px;
      min-width: 768px;
      height: 154px;
      line-height: 20px;
      background-color: rgba(255, 251, 231, 100);
      color: rgba(250, 173, 19, 100);
      font-size: 14px;
      border: 1px solid rgba(255, 228, 175, 100);

      .desc-title {
        margin-bottom: 16px;
        font-size: 20px;
        color: #262626;
      }

      .desc-content {
        font-size: 14px;
        color: #595959;
      }
    }

    .mp-list {
      display: flex;

      .mp-item {
        margin-bottom: 10px;
        padding: 14px;
        width: 266px;
        height: 298px;
        border-radius: 4px;
        border: 1px solid #E5E5E5;
        background: white;

        .item-top {
          padding: 10px 0 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-bottom: 1px solid #e5e5e5;
        }

        .item-image {
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }

        .item-name {
          margin-top: 12px;
          color: #283542;
          font-size: 16px;
        }

        .item-tags {
          margin-top: 14px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .item-tag-1, .item-tag-2 {
            padding: 2px 10px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
          }

          .item-tag-1 {
            border: 1px solid #378BFB;
            color: #378BFB;
          }

          .item-tag-2 {
            margin-left: 8px;
            border: 1px solid #8BC34A;
            color: #8BC34A;
          }
        }

        .item-permission-list {
          padding: 10px 0;
          width: 100%;;

          .item-permission {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            color: #434E6B;
            font-size: 14px;

            > div {
              flex-shrink: 0;
            }

            .permission-icon {
              padding: 0 4px;
              width: 28px;

              > i {
                font-size: 16px;
                color: #E5E5E5;
              }
            }

            .permission-name {
              flex-grow: 1;
              width: 96px;
            }

            .permission-duration {
              width: 80px;
            }

            .permission-operator {
              width: 38px;
              color: #378BFB;
              cursor: pointer;
            }
          }
        }

        &.add {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .add-icon {
            font-size: 96px;
            font-weight: normal;
            color: #E5E5E5;
          }

          > span {
            margin-top: 16px;
            color: #A7A7A8;
          }
        }
      }

      .mp-item + .mp-item {
        margin-left: 10px;
      }
    }
  }

</style>
